import React, { useState } from 'react'
import { connect } from 'umi'
import { Card, Row, Col, Input, Button, Space, Form, Select } from 'antd'
import style from "../index.less"

function SearchHeader(props: any) {
    const { dispatch } = props;
    const [form] = Form.useForm();
    const [pageInfo] = useState({ page: 1, pageSize: 12 });
    const onFinish = (values: any) => {
        // 搜索
        dispatch({ type: 'view/INIT', pageInfo:{
            ...pageInfo,
            ...values
        } })
    };

    const onFinishFailed = (errorInfo: any) => {
        console.log('Failed:', errorInfo);
    };
    return (
        <>
            <Card>
                <Form
                    form={form}
                    name="basic"
                    labelCol={{ span: 8 }}
                    wrapperCol={{ span: 16 }}
                    initialValues={{ remember: true }}
                    onFinish={onFinish}
                    onFinishFailed={onFinishFailed}
                    autoComplete="off"
                >
                    <Row gutter={[8, 8]}>
                        <Col span={6}>
                            <Form.Item
                                label="IP"
                                name="ip"
                            >
                                <Input placeholder='请输入IP地址' />
                            </Form.Item>
                        </Col>
                        <Col span={6}>
                            <Form.Item
                                label="UA"
                                name="userAgent"
                            >
                                <Input placeholder='请输入 User Agent' />
                            </Form.Item>
                        </Col>
                        <Col span={6}>
                            <Form.Item
                                label="URL"
                                name="url"
                            >
                                <Input placeholder='请输入URL' />
                            </Form.Item>
                        </Col>
                        <Col span={6}>
                            <Form.Item
                                label="地址"
                                name="address"
                            >
                                <Input placeholder='请输入地址' />
                            </Form.Item>
                        </Col>
                        <Col span={6}>
                            <Form.Item
                                label="浏览器"
                                name="browser"
                            >
                                <Input placeholder='请输入浏览器' />
                            </Form.Item>
                        </Col>
                        <Col span={6}>
                            <Form.Item
                                label="内核"
                                name="engine"
                            >
                                <Input placeholder='请输入内核' />
                            </Form.Item>
                        </Col>
                        <Col span={6}>
                            <Form.Item
                                label="OS"
                                name="os"
                            >
                                <Input placeholder='请输入操作系统' />
                            </Form.Item>
                        </Col>
                        <Col span={6}>
                            <Form.Item
                                label="设备"
                                name="device"
                            >
                                <Input placeholder='请输入设备' />
                            </Form.Item>
                        </Col>
                    </Row>
                    <Row className={style.search}>
                        <Col span={1}>
                            <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
                                <Space>
                                    <Button type="primary" htmlType="submit">
                                        搜索
                                    </Button>
                                    <Button onClick={() => {
                                        form.resetFields()
                                    }}>
                                        重置
                                    </Button>
                                </Space>
                            </Form.Item>
                        </Col>
                    </Row>
                </Form>
            </Card>
        </>
    );
}
// connect接收两个参数
// 1. 函数 mapStateToProps
const mapStateToProps = (state: any) => {
    const { view } = state
    return view
}
export default connect(mapStateToProps)(SearchHeader)